import React, { memo, useState } from 'react';
import { SwitchTransition, CSSTransition } from 'react-transition-group'
import { CenterWrapper } from '@/components/app-header/c-cpns/header-center/style'
import IconSearchBar from '@/assets/svg/icon-search-bar'
import SearchTabs from '@/components/app-header/c-cpns/header-center/c-cpns/search-tabs'
import SearchSections from '@/components/app-header/c-cpns/header-center/c-cpns/search-sections'
import searchTitles from '@/assets/data/search_titles.json'

const HeaderCenter = memo((props) => {

  const {isSearch, searchBarClick} = props;
  const titles = searchTitles.map(item => item.title);
  const [tabIndex, setTabIndex] = useState(0);
  let searchInfos = searchTitles[tabIndex].searchInfos
  const tabClickHandle = (index) => {
    setTabIndex(index);
    searchInfos = searchTitles[tabIndex].searchInfos
  }
  const searchBarClickHandle = () => {
    if ( searchBarClick ) searchBarClick()
  }
  return (
    <CenterWrapper>
      {/*使用动画替换显示隐藏*/ }
      <CSSTransition in={ !isSearch } classNames='bar' timeout={ 250 } unmountOnExit={ true }>
        <div className="search-bar" onClick={ searchBarClickHandle }>
          <div className="text">搜索房源</div>
          <div className="icon">
            <IconSearchBar/>
          </div>
        </div>
      </CSSTransition>
      <CSSTransition in={ isSearch } classNames='detail' timeout={ 250 } unmountOnExit={ true }>
        <div className="search-detail">
          <SearchTabs titles={ titles } tabClick={ () => tabClickHandle }></SearchTabs>
          <div className="infos">
            <SearchSections searchInfos={ searchInfos }></SearchSections>
          </div>
        </div>
      </CSSTransition>
      {/*{*/ }
      {/*  !isSearch ? <div className="search-bar" onClick={ searchBarClickHandle }>*/ }
      {/*      <div className="text">搜索房源</div>*/ }
      {/*      <div className="icon">*/ }
      {/*        <IconSearchBar/>*/ }
      {/*      </div>*/ }
      {/*    </div>*/ }
      {/*    : <div className="search-detail">*/ }
      {/*      <SearchTabs titles={ titles } tabClick={ () => tabClickHandle }></SearchTabs>*/ }
      {/*      <div className="infos">*/ }
      {/*        <SearchSections searchInfos={ searchInfos }></SearchSections>*/ }
      {/*      </div>*/ }
      {/*    </div>*/ }
      {/*}*/ }

    </CenterWrapper>
  );
});

export default HeaderCenter;
